﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Board.aspx.cs" Inherits="DynaBoard.BoardPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    
    <style type="text/css">
        .field { width: 350px; }
        #body { width: 400px; height: 150px; }
        * { font-family: Arial; font-size: small; }
        .smaller { font-size: smaller; color: gray; }
        #boardName { font-size: 28px; font-family: Times New Roman; }
        #post { padding: 10px; margin-left: 20px; border: solid 1px black; margin-top: 20px; display: none; background-color: #F0F0F0; }
        #ol { list-style-type: disc; margin-right: 30px; }
        #top, #ol { padding-left:20px; } 
        a { text-decoration: none; }
        body { padding: 15px; }
        li { padding-bottom: 10px; }
        #latest, #mostActive { float: left; }
    </style>
    
</head>
<body>

    <form id="form1" runat="server">
    
    <div style="display:none">
    Refresh every <input id="refresh" value="60" type="text" /> seconds
    </div>
    
    <img src="gfx/squawk.png" /><br />
    <span id="boardName"><%= this.boardName %> Board</span><br />
    [&nbsp;<a href="#" onclick="$('#post').show(); return false">New post...</a>&nbsp;|&nbsp;<a href="Search.aspx">Search</a>&nbsp;|&nbsp;<a href="Help.aspx">Help</a>&nbsp;]
    
    <div style="clear:both;"/>
        
    <table id="post">
	    <tr>
		    <td>Name<br /><span class="smaller">optional</span></td>
		    <td><input id="username" type="text" class="field" maxlength="<%= DynaBoard.UserInputString.MaxLength(typeof(DynaBoard.AuthorName)) %>" /></td>
	    </tr>
	    <tr>
		    <td>Email<br /><span class="smaller">optional</span></td>
		    <td><input id="email" type="text" class="field" maxlength="<%= DynaBoard.UserInputString.MaxLength(typeof(DynaBoard.AuthorEmail)) %>"  /></td>
	    </tr>
	    <tr>
		    <td>Subject<br /><span class="smaller">required</span></td>
		    <td><input id="subject" type="text" class="field" maxlength="<%= DynaBoard.UserInputString.MaxLength(typeof(DynaBoard.PostTitle)) %>" /></td>
	    </tr>
	    <tr>
		    <td colspan="2">
			    <textarea id="body"></textarea><br />
			    <input type="button" value="Submit" onclick="submitPost()" />
			    <input type="button" value="Cancel" onclick="cancelPost()" />
		    </td>
	    </tr>
    </table>
        
    <div id="latest">
        <h3>Latest</h3>
        <ol id="ol"></ol>
    </div>
    
    <div id="mostActive">
        <h3>Most Active in last 100</h3>
        <ol id="top"></ol>
    </div>

    <div id="ThreadTemplate">
        <!--   
        <li id="$ID">
            <a href="$URL">$TITLE</a>
            ($CHILDREN replies)<br/>
            <span style="font-size:smaller">Last active $ACTIVE, started $STARTED</span>
        </li>
        -->
    </div>
    
    </form>
</body>
</html>

<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jsonAspNet.js"></script>
<script type="text/javascript" src="js/prototypes.js"></script>
<script type="text/javascript" src="js/Repeater.js"></script>
<script type="text/javascript">

    function cancelPost()
    {
        $("#post").hide();
        $("#subject").val("");
        $("#body").val("");
    }

    function submitPost()
    {
        if($("#subject").val().trim().length === 0)
        {
            alert("A new post must have a subject.");
            $("#subject").focus();
        }
        else if ($("#body").val().trim().length === 0)
        {
            alert("Cannot submit a blank post.");
            $("#body").focus();
        }
        else
        {
            $.jsonAspNet("Board.aspx", "StartThread", 
            {
                authorName: $("#username").val().trim(),
                authorEmail: $("#email").val().trim(),
                subject: $("#subject").val().trim(),
                body: $("#body").val().trim(),
                board: <%= this.boardId %>
            }, function(postId) 
            {
                location.href = 'Post.aspx?id=' + postId;
            });
        }
    }
    
    function postHtml(post)
    {
        var temp = new Template(document.getElementById("ThreadTemplate"));                
        temp.replace("$ID", post.Id);
        temp.replace("$URL", post.Url);
        temp.replace("$TITLE", post.Title);
        temp.replace("$CHILDREN", post.Children);
        temp.replace("$ACTIVE", post.ActiveDateTime);
        temp.replace("$STARTED", post.StartedDateTime);
        return temp.markup;
    }
    
    function displayPosts(posts, appendToElementId) 
    {
        if (posts.length > 0)
        {
            $(appendToElementId).html("");
            
            jQuery.each(posts, function()
            {
                $(appendToElementId).append(postHtml(this));
            });
        }
    }

    function FetchLatestPosts()
    {
        $.jsonAspNet("Board.aspx", "FetchLatestPosts", { boardId: <%= this.boardId %>}, function(posts) {
            displayPosts(posts, "#ol");
        });
         
        $.jsonAspNet("Board.aspx", "MostActive", function(posts) {
            displayPosts(posts, "#top");
        }); 
    }
    
    function RefreshLatestPosts()
    {
        FetchLatestPosts();
        setTimeout(RefreshLatestPosts, parseInt($("#refresh").val()) * 1000);
    }

    $(document).ready(function()
    {
        FetchLatestPosts();
        RefreshLatestPosts();
    });


</script>